<template>
  <div class="imgAndText_wrapper">
    <pad-child-header :title="title" :filmerNum="filmerNum"></pad-child-header>
    <!-- 图文报告 -->
    <section class="imgAndText_content p_t_82">
      <div class="p_10">
        <div class="img_wrapper m_b_24" v-for="(v,i) in Powerfilmer" :key="i" >
          <img :src="v.getFilePath" width="100%" alt="">  
        </div>
      </div>
      
    </section>
  </div>
</template>

<script>
import { HttpService } from "../../provides/index";

export default {
  components: {},
  props: {},
  data() {
    return {
      title: "图文报告",
      filmerNum:1,
      filmId: "",
      Powerfilmer: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    getPowerfilmer(params) {
      console.log(params);
      //
      HttpService.api({
        url: "/powerfilmer",
        params: params,
        headers: {}
      }).then(res => {
        this.Powerfilmer = res.result || [];
        this.filmerNum = '    （1/'+this.Powerfilmer.length+'）';
      });
    },
    handleScroll() {
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      console.log(clientHeight)
      let imgList = document.getElementsByClassName('img_wrapper');
      for(let i=0; i<imgList.length; i++){
        var scrollTop = imgList[i].getBoundingClientRect().top;
        console.log(scrollTop)
        console.log(imgList[i])
        if(scrollTop>-384&&scrollTop<384){
            this.filmerNum = '    （'+(i+1)+'/'+this.Powerfilmer.length+'）';
            // return;
        }
      }

      console.log(this.filmerNum)
    }
  },
  created() {},
  mounted() {
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain: this.$route.params.hospdomain
    };
    this.getPowerfilmer(this.params);
    
    window.addEventListener('scroll', this.handleScroll, true);
  }
};
</script>
<style lang="scss" scoped>
.imgAndText_wrapper {
  font-size: 0;
}
.imgAndText_content {
  display: flex;
  justify-content: center;
  padding-top: pxToRem(70);
  .img_wrapper {
    width: pxToRem(498);
    box-shadow: pxToRem(3) pxToRem(4) pxToRem(5) 0px rgba(0, 0, 0, 0.29);
    border-radius: pxToRem(10);
    border: solid pxToRem(1) #b7b7b7;
    overflow: hidden;
  }
}
</style>